Vue.component('gl-table', {
    template: `<div :id="id" :class="[layer?'layer':'']" :style="{'border':layerBorder}">
    <el-form :inline="true" :form="form">
        <el-form-item>
            <el-button type="primary" @click="Add">添加</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe border style="width: 100%" height="calc(100vh - 160px)">
        <el-table-column align="center" label="序号" width="50" type="index"></el-table-column>
        <template v-for="(item,index) in data.theads" :key="index">
            <el-table-column :align="item.align" :props="item.props" :label="item.label" :width="item.width">
                <template v-if="item.type=='image'" v-slot="{row}">
                    <el-image :src="BASE_IMG + row[item.props]" :fit="item.fit" :style="{width:item.imgaeWidth+'px',height:item.imageHeight +'px'}"></el-image>
                </template>
                <template v-else-if="item.type=='text'" v-slot="{row}">
                    {{row[item.props]}}
                </template>
            </el-table-column>
        </template>
        <el-table-column align="center" label="操作" width="180">
            <template v-slot={row}>
                <el-button type="success" size="small" @click="Edit(row[data.Primary_key])">修改</el-button>
                <el-button type="danger"  size="small" @click="Remove(row[data.Primary_key])">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 5px;" background @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10, 20, 30, 50]"
        :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
    mixins: [global],
    data() {
        return {
            tableData: [],
            form: {
                Data:this.data.SQL,
                PaginationNumber: 1,
                RowAmount: parseInt(this.data.limit)
            },
            total: 0,
            loading: false,
        }
    },
    watch: {
        'data.SQL': function (newVal) {
            this.form.Data = newVal;
            this.getList(this.form);
        }
    },
    mounted() {
        console.log(this.data);
        this.getList(this.form);
    },
    methods: {
        getList(data) {
            const that = this;
            console.log(data);
            if (this.data.SQL) {
                $.ajax({
                    headers:requestHeaders(),
                    url: `${BASE_URL2}/generalBusiness/generalPaginationQueryBySQL`,
                    type: 'POST',
                    data,
                    success: function (Result) {
                        that.tableData = Result.Rows;
                        that.total = parseInt(Result.TotalRows);
                    },
                    complete: function (XMLHttpRequest) {
                        that.loading = false
                        requestPretreatment(XMLHttpRequest);
                    },
                    dataType: "json"
                });
            }
        },
        handleSizeChange(val) {//选择查询条数
            this.form.page = 1;
            this.form.limit = val;
            this.getList(this.form)
        },
        handleCurrentChange(val) {//选择第几页
            this.form.page = val;
            this.getList(this.form)
        },
        Add() {
            window.location.href = `${this.data.Add}`;
        },
        Edit(Primary_key) {
            window.location.href = `${this.data.Edit}?${this.data.Primary_key}=${Primary_key}`;
            sessionStorage.setItem(this.data.Primary_key, Primary_key);
        },
        Remove() {
            const that = this;
            $.ajax({
                headers:requestHeaders(),
                url: `${BASE_URL1}/generalBusiness/generalQueryAllColumnBySQL`,
                type: 'POST',
                data: {
                    Data: this.data.SQL
                },
                success: function (res) {
                    console.log(res);
                },
                complete: function (XMLHttpRequest) {
                    that.loading = false
                    requestPretreatment(XMLHttpRequest);
                }
            })
        },
    }
})

Vue.component('gl-table-config', {
    template: `<el-collapse :id="'config'+id" v-model="activeNames">
    <el-collapse-item :name="1">
    <template slot="title">
        <div class="table_titel">
            <div class="titel">List组件</div>
           
        </div>
    </template>
    <div class="table_titel">
        <div class="titel">数据源配置{{theads.length>0?'(共'+theads.length+'个字段)':''}}</div>
        <div class="operation">
            <el-button  @click="request" type="primary" size="small">获取参数</el-button>
        </div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="表格高度">
            <el-input type="textarea" :autosize="{ minRows: 5}" v-model="SQL" placeholder="请输入数据源SQL"></el-input>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">筛选器配置</div>
        <div class="operation">
            <el-button type="primary" size="small" @click="AddScreen">添加</el-button>
            <el-button type="danger" size="small" @click="RemoveScreen">删除</el-button>
        </div>
    </div>
    <div class="table_titel">
        <div class="titel">表头配置</div>
        <div class="operation">
            <el-button type="primary" size="small" @click="Add">添加</el-button>
            <el-button type="danger" size="small" @click="Remove">删除</el-button>
        </div>
    </div>
    <el-descriptions :column="2" border size="small" v-for="(item,index) in data.theads" :key="index">
        <el-descriptions-item :label="index + 1 +'.字段类型'">
            <el-select v-model="item.type" style="width:100%" placeholder="请选择字段类型">
                <el-option v-for="(item,index) in type" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="关联字段">
            <el-select v-model="item.props" style="width:100%" placeholder="请选择字段">
                <el-option v-for="(item,index) in theads" :key="index" :label="item" :value="item"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="显示名称">
            <el-input v-model="item.label" placeholder="请输入显示名称"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="指定宽度">
            <el-input v-model="item.width" placeholder="请输入指定宽度"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="对齐方式">
            <el-select v-model="item.align" style="width:100%" placeholder="请选择字段">
                <el-option v-for="(item,index) in align" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <template v-if="item.type=='image'">
            <el-descriptions-item label="适应方式">
                <el-select v-model="item.fit" style="width:100%" placeholder="请输入图片高度">
                    <el-option v-for="(item,index) in fit" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="图片宽度">
                <el-input v-model="item.imageWidth" placeholder="请输入图片宽度"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="图片高度">
                <el-input v-model="item.imageHeight" placeholder="请输入图片高度"></el-input>
            </el-descriptions-item>
        </template>  
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">操作</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="添加页面">
            <el-select v-model="data.AddPage" style="width:100%" placeholder="请选择添加页面">
                <el-option v-for="(item,index) in page" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="修改页面">
            <el-select v-model="data.EditPage" style="width:100%" placeholder="请选择修改页面">
                <el-option v-for="(item,index) in page" :key="index" :label="item.System_Action_Name" :value="item.System_Action_SerialNumber"></el-option>
            </el-select>
        </el-descriptions-item>
    </el-descriptions>
    </el-collapse-item></el-collapse>`,
    mixins: [globalConfig],
    data() {
        return {
            theads: [],
            type: [{
                label: '文本',
                value: 'text'
            }, {
                label: '图片',
                value: 'image'
            }],
            align: [{
                label: '左',
                value: 'left'
            }, {
                label: '中',
                value: 'center'
            }, {
                label: '右',
                value: 'right'
            }],
            operateType: [{
                label: '跳转',
                value: 'skip',
            }, {
                label: '请求',
                value: 'request',
            }],
            activeNames: [1],
            page: [],
            SQL:'',
        }
    },
    methods: {
        getData() {
            const that = this;
            $.ajax({
                headers:requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
                type: 'GET',
                data: {
                    Data: 'base_system_action_info'
                },
                success: function (res) {
                    that.action = res
                    console.log(res);
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            })
        },
        request() {
            const that = this;
            this.data.SQL = this.SQL;
            $.ajax({
                headers:requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryAllColumnBySQL`,
                type: 'POST',
                data: {
                    Data: this.data.SQL
                },
                success: function (res) {
                    that.theads = res
                },
                complete: function (XMLHttpRequest) {
                    that.loading = false
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            })
        },
        Add() {//添加字段
            this.data.theads.push({
                type: '',//类型
                label: '',//显示字段
                props: '',//字段
                width: '',
                align: 'left',//位置
                imgaeWidth: '',
                imageHeight: '',
                fit: 'contain',
            })
        },
        Remove() {//删除字段
            if (this.data.theads.length > 0) {
                this.data.theads.pop();
            } else {
                this.$message({
                    message: '不能再删除了！',
                    type: 'warning'
                })
            }
        },
        AddScreen() {

        },
        RemoveScreen() {

        }
    },
    mounted() {
        this.getData();
    }
})

